<template>
  <nav class="msite_nav">
    <div class="swiper-container" v-if="category.length">
      <div class="swiper-wrapper">
        <div class="swiper-slide" v-for="(categorys , index) in categorysArr" :key="index">
          <a href="javascript:" class="link_to_food" v-for="(category,index) in categorys" :key="index">
            <div class="food_container">
              <img :src="imagesUrl+category.image_url">
            </div>
            <span>{{category.title}}</span>
          </a>
        </div>
      </div>
      <div class="swiper-pagination"></div>
    </div>
    <img src="./images/msite_back.svg" alt="back" v-else/>
  </nav>
</template>

<script>
  import {mapState} from 'vuex';
  export default {
    data(){
      return {
        imagesUrl: 'https://fuss10.elemecdn.com',
        back: false
      }
    },
    computed:{
      ...mapState(['category']),
      categorysArr(){
        const {category} = this
        let arr = [];
        let minArr = [];
        category.forEach(key => {
          minArr.push(key)
          if(minArr.length === 8){
            arr.push(minArr)
            minArr = [];
          }
        })
        return arr;
      }
    },
    watch: {
      categorysArr(value){
        this.$nextTick(() => {
          //创建Swiper实例
          new Swiper('.swiper-container',{
            loop: true, // 循环模式选项
            // 如果需要分页器
            pagination: {
              el: '.swiper-pagination',
            },
            effect : 'coverflow',
          });

        })
      }
    }
  }
</script>

<style lang="stylus" rel="stylesheet/stylus" scoped>
  .msite_nav
    bottom-border-1px(#e4e4e4)
    //margin-top 45px
    height 7.5rem
    background #fff
    .swiper-container
      width 100%
      height 100%
      overflow hidden
      .swiper-slide
          display flex
          justify-content center
          align-items flex-start
          flex-wrap wrap
          .link_to_food
            width 25%
            .food_container
              display block
              width 100%
              text-align center
              padding-bottom 10px
              font-size 0
              img
                display inline-block
                width 1.875rem
                height 1.875rem
            span
              display block
              width 100%
              text-align center
              font-size .487rem
              color #666
      .swiper-pagination
        >span.swiper-pagination-bullet-active
          background #02a774
</style>
